<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Video danmaku | MuiPlayer</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/favicon.ico">
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="/css/mui-player.min.css">
    <link rel="stylesheet" href="/css/swiper.min.css">
    <link rel="stylesheet" href="/css/CommentCoreLibrary.min.css">
    <link rel="apple-touch-icon" href="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/logo_solid.png">
    <script src="https://www.googletagmanager.com/gtag/js?id=G-X4RSEE27EY"></script>
    <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'G-X4RSEE27EY');
        </script>
    <script src="/plugin/flv.min.js"></script>
    <script src="/plugin/hls.min.js"></script>
    <script src="/js/mui-player.min.js"></script>
    <script src="/js/CommentCoreLibrary.min.js"></script>
    <script src="/js/swiper.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <meta name="description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta name="charset" content="utf-8">
    <meta name="baidu-site-verification" content="code-AdGRxnQ9NZ">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta property="og:site_name" content="MuiPlayer">
    <meta property="og:type" content="article">
    <meta property="og:image" content="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/mobile_preview.png">
    <meta name="theme-color" content="#FFFFFF">
    <meta property="og:title" content="">
    <meta property="og:description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta property="og:url" content="https://muiplayer.js.org/">
    <meta property="og:locale" content="en-US">
    <meta property="twitter:title" content="">
    <meta property="twitter:description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta name="keywords" content="HTML5 video, player, hls, danmaku, adaptive-bitrate, muiplayer">
    
    <link rel="preload" href="/assets/css/0.styles.ae6ed136.css" as="style"><link rel="preload" href="/assets/js/app.3641bd26.js" as="script"><link rel="preload" href="/assets/js/23.35f66f6c.js" as="script"><link rel="preload" href="/assets/js/3.67a24b41.js" as="script"><link rel="preload" href="/assets/js/32.9eac0031.js" as="script"><link rel="preload" href="/assets/js/15.78fdfcaf.js" as="script"><link rel="prefetch" href="/assets/js/1.54927c41.js"><link rel="prefetch" href="/assets/js/10.dd4adaf8.js"><link rel="prefetch" href="/assets/js/11.ea997365.js"><link rel="prefetch" href="/assets/js/12.01af38a6.js"><link rel="prefetch" href="/assets/js/13.75800705.js"><link rel="prefetch" href="/assets/js/14.9fc60c4c.js"><link rel="prefetch" href="/assets/js/16.0101612c.js"><link rel="prefetch" href="/assets/js/17.a9b41ba5.js"><link rel="prefetch" href="/assets/js/18.a55912b8.js"><link rel="prefetch" href="/assets/js/19.13ce6fb6.js"><link rel="prefetch" href="/assets/js/20.57cf3163.js"><link rel="prefetch" href="/assets/js/21.a9f966ac.js"><link rel="prefetch" href="/assets/js/22.65e9060e.js"><link rel="prefetch" href="/assets/js/24.3adbb4ca.js"><link rel="prefetch" href="/assets/js/25.00421a1d.js"><link rel="prefetch" href="/assets/js/26.ba6e1ac8.js"><link rel="prefetch" href="/assets/js/27.4e1b228b.js"><link rel="prefetch" href="/assets/js/28.2d7617cb.js"><link rel="prefetch" href="/assets/js/29.ff74fd8e.js"><link rel="prefetch" href="/assets/js/30.ff8d825c.js"><link rel="prefetch" href="/assets/js/31.daa6ba5b.js"><link rel="prefetch" href="/assets/js/33.32a2153a.js"><link rel="prefetch" href="/assets/js/34.da24de19.js"><link rel="prefetch" href="/assets/js/35.c97bfd00.js"><link rel="prefetch" href="/assets/js/36.3fd6a073.js"><link rel="prefetch" href="/assets/js/37.262c376a.js"><link rel="prefetch" href="/assets/js/38.2bd8c4ba.js"><link rel="prefetch" href="/assets/js/39.618c3695.js"><link rel="prefetch" href="/assets/js/4.9edd66f8.js"><link rel="prefetch" href="/assets/js/40.0502620b.js"><link rel="prefetch" href="/assets/js/41.9a3bd9b3.js"><link rel="prefetch" href="/assets/js/42.8ac30a45.js"><link rel="prefetch" href="/assets/js/43.e3fc5609.js"><link rel="prefetch" href="/assets/js/44.9acf05da.js"><link rel="prefetch" href="/assets/js/45.8c740c98.js"><link rel="prefetch" href="/assets/js/46.250aba22.js"><link rel="prefetch" href="/assets/js/47.83ee64f1.js"><link rel="prefetch" href="/assets/js/48.8d559ee8.js"><link rel="prefetch" href="/assets/js/49.6eeaca4b.js"><link rel="prefetch" href="/assets/js/5.35f74ec6.js"><link rel="prefetch" href="/assets/js/50.6e5e287b.js"><link rel="prefetch" href="/assets/js/51.ff3ae70a.js"><link rel="prefetch" href="/assets/js/52.378b3b20.js"><link rel="prefetch" href="/assets/js/53.868673eb.js"><link rel="prefetch" href="/assets/js/54.3c62a57a.js"><link rel="prefetch" href="/assets/js/55.035ed35d.js"><link rel="prefetch" href="/assets/js/56.08925c33.js"><link rel="prefetch" href="/assets/js/57.5d073ed4.js"><link rel="prefetch" href="/assets/js/58.dce950e6.js"><link rel="prefetch" href="/assets/js/59.092c0de9.js"><link rel="prefetch" href="/assets/js/6.30b43e5d.js"><link rel="prefetch" href="/assets/js/60.8526ebe1.js"><link rel="prefetch" href="/assets/js/61.c02d2349.js"><link rel="prefetch" href="/assets/js/62.b93eeaf2.js"><link rel="prefetch" href="/assets/js/63.b363131d.js"><link rel="prefetch" href="/assets/js/64.0cda51e1.js"><link rel="prefetch" href="/assets/js/65.d26b33ae.js"><link rel="prefetch" href="/assets/js/66.d07350b7.js"><link rel="prefetch" href="/assets/js/67.85653372.js"><link rel="prefetch" href="/assets/js/7.7232d571.js"><link rel="prefetch" href="/assets/js/8.772a3a10.js"><link rel="prefetch" href="/assets/js/9.5f308baf.js">
    <link rel="stylesheet" href="/assets/css/0.styles.ae6ed136.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">MuiPlayer</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">
  Guide
</a></div><div class="nav-item"><a href="/demo/" class="nav-link">
  Demo
</a></div><div class="nav-item"><a href="/joinUs/" class="nav-link">
  Download
</a></div><div class="nav-item"><a href="https://gitee.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/barrage.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  English
</a></li><li class="dropdown-item"><!----> <a href="/zh/guide/barrage.html" class="nav-link">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">
  Guide
</a></div><div class="nav-item"><a href="/demo/" class="nav-link">
  Demo
</a></div><div class="nav-item"><a href="/joinUs/" class="nav-link">
  Download
</a></div><div class="nav-item"><a href="https://gitee.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/barrage.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  English
</a></li><li class="dropdown-item"><!----> <a href="/zh/guide/barrage.html" class="nav-link">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Guide</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/guide/begin.html" class="sidebar-link">Quick start</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/begin.html#installation" class="sidebar-link">installation</a></li><li class="sidebar-sub-header"><a href="/guide/begin.html#usage" class="sidebar-link">usage</a></li></ul></li><li><a href="/guide/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/api.html#main-configuration" class="sidebar-link">Main configuration</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#custom-configuration" class="sidebar-link">Custom configuration</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#play-event-monitoring" class="sidebar-link">Play event monitoring</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#player-interface" class="sidebar-link">Player interface</a></li></ul></li><li><a href="/guide/mui-player-desktop-plugin.html" class="sidebar-link">PC extension</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#installation" class="sidebar-link">installation</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#custom-settings-group-configuration" class="sidebar-link">Custom settings group configuration</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#customize-the-right-click-menu" class="sidebar-link">Customize the right click menu</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#action-event-monitoring" class="sidebar-link">Action event monitoring</a></li></ul></li><li><a href="/guide/plus-desktop-plugin.html" class="sidebar-link">Pc extend【Professional edition】</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#download" class="sidebar-link">download</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#configuration-options-plus" class="sidebar-link">Configuration options plus</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#interface-plus" class="sidebar-link">Interface plus</a></li></ul></li><li><a href="/guide/plus-mobile-plugin.html" class="sidebar-link">Mobile extend【Professional edition】</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#scan-qr-code" class="sidebar-link">Scan QR code</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#download" class="sidebar-link">download</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#action-event-monitoring" class="sidebar-link">Action event monitoring</a></li></ul></li><li><a href="/guide/preset.html" class="sidebar-link">MediaSource support</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/preset.html#use-hls-js-or-flv-js" class="sidebar-link">Use hls.js or flv.js</a></li><li class="sidebar-sub-header"><a href="/guide/preset.html#configuration" class="sidebar-link">Configuration</a></li><li class="sidebar-sub-header"><a href="/guide/preset.html#custom-use-mse-library" class="sidebar-link">Custom use MSE library</a></li></ul></li><li><a href="/guide/thumbnails.html" class="sidebar-link">Video thumbnail</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/barrage.html" aria-current="page" class="active sidebar-link">Video danmaku</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/barrage.html#use-commentcorelibrary" class="sidebar-link">Use CommentCoreLibrary</a></li></ul></li><li><a href="/guide/subtitle.html" class="sidebar-link">Video subtitles</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/custom-control.html" class="sidebar-link">Custom player controls</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/custom-control.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-1-customize-the-player-header-button" class="sidebar-link">Example 1: Customize the player header button</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-2-customize-the-buttons-at-the-bottom-of-the-player" class="sidebar-link">Example 2: Customize the buttons at the bottom of the player</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-3-customize-the-pop-up-window-on-the-right-sidebar" class="sidebar-link">Example 3: Customize the pop-up window on the right sidebar</a></li></ul></li><li><a href="/guide/uni-app.html" class="sidebar-link">Use in uni-app</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/other-problem.html" class="sidebar-link">other problems</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="video-danmaku"><a href="#video-danmaku" class="header-anchor">#</a> Video danmaku</h1> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>MuiPlayer has not developed its own barrage function, but you can still integrate three-party barrage plug-ins into the player. Many open source and excellent <a href="https://github.com/search?q=danmaku" target="_blank" rel="noopener noreferrer">video danmaku projects<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> can be retrieved from Github.</p> <p><a href="https://github.com/jabbany/CommentCoreLibrary" target="_blank" rel="noopener noreferrer">CommentCoreLibrary<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> The open source component provides many powerful barrage functions, and the configurable API is relatively complete. For example, the play example below has completed the application of the component, learn from <a href="https://github.com/muiplayer/hello-muiplayer/blob/master/demo/danmakuExample.html" target="_blank" rel="noopener noreferrer">here<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> How to apply CCL to MuiPlayer so that it can be easily applied to your own projects.</p></div> <!----> <h2 id="use-commentcorelibrary"><a href="#use-commentcorelibrary" class="header-anchor">#</a> Use CommentCoreLibrary</h2> <p>1、Introduce ccl in the html file header:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- import basic style files --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>stylesheet<span class="token punctuation">&quot;</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/css<span class="token punctuation">&quot;</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>css/CommentCoreLibrary.min.css<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token comment">&lt;!-- import basic script --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>text/javascript<span class="token punctuation">&quot;</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>js/CommentCoreLibrary.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>2、Place the following html dom structure at the location where the barrage is needed:</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- Note: Add the class name for the barrage container: container, and add the class name for the parent container: abp --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mui-player<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>abp<span class="token punctuation">&quot;</span></span> <span class="token attr-name">ref</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>muiPlayer<span class="token punctuation">&quot;</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span>
	<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>comment-stage<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">'</span>container<span class="token punctuation">'</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token value css language-css"><span class="token property">z-index</span><span class="token punctuation">:</span> 1 <span class="token important">!important</span><span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span> 325px<span class="token punctuation">;</span><span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span></span><span class="token punctuation">&quot;</span></span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>3、Initialize the ccl instance:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> <span class="token constant">CM</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">CommentManager</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'comment-stage'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token constant">CM</span><span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Initialize danmaku manager</span>


<span class="token keyword">var</span> danmakuData <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span><span class="token string">&quot;mode&quot;</span><span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token string">&quot;text&quot;</span><span class="token operator">:</span><span class="token string">&quot;请画出受力分析（10分）&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;stime&quot;</span><span class="token operator">:</span><span class="token number">200</span><span class="token punctuation">,</span><span class="token string">&quot;size&quot;</span><span class="token operator">:</span><span class="token number">25</span><span class="token punctuation">,</span><span class="token string">&quot;dur&quot;</span><span class="token operator">:</span><span class="token number">7000</span><span class="token punctuation">,</span><span class="token string">&quot;color&quot;</span><span class="token operator">:</span><span class="token number">0xffffff</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token punctuation">{</span><span class="token string">&quot;mode&quot;</span><span class="token operator">:</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token string">&quot;text&quot;</span><span class="token operator">:</span><span class="token string">&quot;这风景太漂亮了吧~&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;stime&quot;</span><span class="token operator">:</span><span class="token number">1000</span><span class="token punctuation">,</span><span class="token string">&quot;size&quot;</span><span class="token operator">:</span><span class="token number">25</span><span class="token punctuation">,</span><span class="token string">&quot;dur&quot;</span><span class="token operator">:</span><span class="token number">4000</span><span class="token punctuation">,</span><span class="token string">&quot;color&quot;</span><span class="token operator">:</span><span class="token number">0xFF0000</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
	<span class="token punctuation">{</span><span class="token string">&quot;mode&quot;</span><span class="token operator">:</span><span class="token number">5</span><span class="token punctuation">,</span><span class="token string">&quot;text&quot;</span><span class="token operator">:</span><span class="token string">&quot;前方高能，建议反复观看！！&quot;</span><span class="token punctuation">,</span><span class="token string">&quot;stime&quot;</span><span class="token operator">:</span><span class="token number">1500</span><span class="token punctuation">,</span><span class="token string">&quot;size&quot;</span><span class="token operator">:</span><span class="token number">25</span><span class="token punctuation">,</span><span class="token string">&quot;dur&quot;</span><span class="token operator">:</span><span class="token number">4000</span><span class="token punctuation">,</span><span class="token string">&quot;color&quot;</span><span class="token operator">:</span><span class="token number">0xFFFF00</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span>
<span class="token constant">CM</span><span class="token punctuation">.</span><span class="token function">load</span><span class="token punctuation">(</span>danmakuList<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Load the danmaku list</span>

<span class="token comment">// Start playing the danmaku (the danmaku will not move when it is not activated)</span>
<span class="token constant">CM</span><span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Stop playing (stop the danmaku moving)</span>
<span class="token constant">CM</span><span class="token punctuation">.</span><span class="token function">stop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Update timeline time</span>
<span class="token constant">CM</span><span class="token punctuation">.</span><span class="token function">time</span><span class="token punctuation">(</span><span class="token number">500</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token constant">CM</span><span class="token punctuation">.</span><span class="token function">time</span><span class="token punctuation">(</span><span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p><strong>TIP：</strong> For specific use, please view the actual application code from <a href="https://github.com/muiplayer/hello-muiplayer/blob/master/demo/danmakuExample.html" target="_blank" rel="noopener noreferrer">here<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, such as how to set the bullet screen text The style, location, retention time, etc. Check the <a href="https://github.com/jabbany/CommentCoreLibrary/tree/master/docs" target="_blank" rel="noopener noreferrer">CCL API<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> document here</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/muiplayer/hello-muiplayer/edit/master/docs/docs/guide/barrage.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">7/10/2021, 1:35:50 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/guide/thumbnails.html" class="prev">
        Video thumbnail
      </a></span> <span class="next"><a href="/guide/subtitle.html">
        Video subtitles
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.3641bd26.js" defer></script><script src="/assets/js/23.35f66f6c.js" defer></script><script src="/assets/js/3.67a24b41.js" defer></script><script src="/assets/js/32.9eac0031.js" defer></script><script src="/assets/js/15.78fdfcaf.js" defer></script>
  </body>
</html>
